<!DOCTYPE html>
<html class="x-admin-sm">

    <head>
        <meta charset="UTF-8">
        <title>欢迎页面-X-admin2.2</title>
        <meta name="renderer" content="webkit">
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
        <meta name="viewport"
              content="width=device-width,user-scalable=yes, minimum-scale=0.4, initial-scale=0.8,target-densitydpi=low-dpi" />
        <link rel="stylesheet" href="/Public/css/font.css">
        <link rel="stylesheet" href="/Public/css/xadmin.css">
        <script type="text/javascript" src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
        <script src="/Public/lib/layui/layui.js" charset="utf-8"></script>
        <script type="text/javascript" src="/Public/js/xadmin.js"></script>
        <script type="text/javascript" src="/Public/js/ueditor.config.js"></script>
        <script type="text/javascript" src="/Public/js/ueditor.all.min.js"></script>
        <script type="text/javascript" src="/Public/js/zh-cn.js"></script>
        <!-- 让IE8/9支持媒体查询，从而兼容栅格 -->
        <!--[if lt IE 9]>
              <script src="https://cdn.staticfile.org/html5shiv/r29/html5.min.js"></script>
              <script src="https://cdn.staticfile.org/respond.js/1.4.2/respond.min.js"></script>
            <![endif]-->
        <style>
            .bg {
                background: #e0e0e0;
            }

            .layui-card {
                margin-bottom: 0;
            }

            .layui-card-header {
                border-bottom: none;
            }

            .select-food-panel,
            .food-panel {
                width: 49%;
                min-height: 667px;
                float: right;
                border: 1px solid #ddd;
            }
            .food-panel {
                float: left;
            }
            .typeLabel {
                padding: 10px 15px;
                margin: 10px;
                background: #fff;
                border-radius: 5px;
                border: 1px solid #ddd;
                float: left;
            }

            .foodType {
                overflow: hidden;
            }

            .foodCrad {
                padding: 20px 20px;
                box-shadow: 0 0 15px #ddd;
                background: #fff;
                float: left;
                min-width: 100px;
                text-align: center;
                position: relative;
                margin: 10px;
                border: 1px solid #fff;
            }

            .money {
                position: absolute;
                right: 15px;
                bottom: 0;
            }

            .title {
                float: left;
            }

            .order {
                float: right;
                color: red;
            }

            .selectfoodBody {
                height: 480px;
                overflow: hidden;
                overflow-y: auto;
            }

            .selectFoodCrad {
                width: 95%;
                margin: 10px auto;
                box-shadow: 0 0 15px #ddd;
                padding: 20px 10px;
                display: flex;
                align-items: center;
                align-content: center;
                justify-content: space-between;
                background: #fff;
            }

            .block-select-food {
                width: 100%;
            }

            .operation .btn {
                width: 30px;
                height: 30px;
                border-radius: 50%;
                border: 1px solid #ddd;
                text-align: center;

            }

            .operation div {
                float: left;
                line-height: 30px;
                margin: 0 5px;
            }

            .operation .num {
                min-width: 23px;
                text-align: center;
            }

            .select-food-bottom {
                box-shadow: 0 0 5px #ddd;
                background: #fff;
                margin-top: 10px;
            }

            .total {
                float: left;
            }

            .total-money {
                float: right;
                font-size: 20px;
                color: red;
            }

            .border-bottom {
                border-bottom: 1px solid #ddd;
            }

            .active {
                border: 1px solid #009688;
                color: #009688;
            }

            #pay-header{
                overflow: hidden;
                align-items: center;
                align-content: center;
                justify-content: space-around;
                margin: 20px auto;
                width: 606px;
            }
            #pay-header .item{
                border: 1px solid #ddd;
                width: 200px;
                height: 100px;
                font-size: 40px;
                text-align: center;
                display: flex;
                align-items: center;
                justify-content: center;
                float: left;
                cursor: pointer;
                border-right:1px solid #fff;
            }
            #pay-header .item:last-child{
                border-right:1px solid #ddd;
            }
            #pay-header .item img{
                width: 165px;
                height: auto;
            }
            #pay-body{
                padding: 20px;
            }
            #pay-panel .active{
                border: 1px solid #009688 !important;
                color: #000;
            }

            .total-num{
                float: left;
                line-height: 30px;
            }
            .closebtnt{
                margin-top: 20px;
            }
        </style>
    </head>

    <body>
        <div class="layui-fluid">
            <div class="layui-row layui-col-space15">
                <div class="layui-col-md12">
                    <div class="layui-card">
                        <div class="layui-card-header">人工下单</div>
                    </div>
                </div>
                <div class="layui-col-md12">
                    <div class="food-panel">
                        <div class="layui-card">
                            <div class="layui-card-header bg">人工下单</div>
                        </div>
                        <div class="layui-card-body ">
                            <div class="layui-form layui-col-space5">
                                <div class="layui-input-inline layui-show-xs-block block-food border">
                                    <div class="foodType" id="type-panel">
                                        <div class="typeLabel active" data-id="0">全部</div>
                                    </div>
                                    <div class="cradBody" id="foodlist">

                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="select-food-panel">
                        <div class="layui-card">
                            <div class="layui-card-header bg"><span class="title">当前已选</span><span
                                    class="order"></span></div>
                        </div>
                        <div class="layui-card-body ">
                            <div class="layui-form layui-col-space5">
                                <div class="layui-input-inline layui-show-xs-block block-select-food border">
                                    <div class="selectfoodBody">

                                    </div>
                                    <div class="layui-show-xs-block select-food-bottom">
                                        <div class="layui-card">
                                            <div class="layui-card-header border-bottom">
                                                <div class="total">共计 <span class="food-num">0</span>个商品 </div>
                                                <div class="total-money"><span class="money-num">0</span>元</div>
                                            </div>
                                            <div class="layui-input-inline layui-show-xs-block"
                                                 style="margin: 20px 0; text-align: right;width: 100%;">
                                                <button class="layui-btn" id="submit" style="display:inline-block">确定</button>
                                                <button class="layui-btn layui-btn-primary"
                                                        style="display:inline-block;margin:0 20px;" id="clears">取消</button>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

            </div>
            <div id="peyTypeTem" style="display:none;">
                <div id="pay-header">
                    <div class="item active" data-type="1">
                        <img src="/Public/images/wx.png">
                    </div>
                    <div class="item" data-type="2">
                        <img src="/Public/images/zfb.png">
                    </div>
                    <div class="item" data-type="3">现金支付</div>
                </div>
                <div id="pay-body">
                    <div class="layui-form-item">
                        <label for="L_username" class="layui-form-label" style="width: auto;padding: 9px 0;">支付条码：</label>
                        <div class="layui-input-inline">
                            <input type="text" id="code-num" autocomplete="off" class="layui-input">
                        </div>
                    </div>
                </div>
                <div id="pay-footer" style="padding:20px;text-align: right;">
                    <span class="total-num">总金额：<span class="e-money">0.00</span> 元</span>
                    <button class="layui-btn" id="pay-btn">确定</button>
                </div>
            </div>
    </body>
    <script>
        // 默认label
        var typeArr = [
        ]
        var selectFood = [];
        var foodArr = []
        $.post("/Admin/FoodProduct/getProductCate", {}, function(msg) {
            $.each(msg.data, function(i, e) {
                var html = '<div class="typeLabel" data-id="' + e.id + '">' + e.value + '</div>'
                $('#type-panel').append(html)
            })
        })
        $.post('/Admin/FoodProduct/getCateProduct', {id: 'a'}, function(msg) {
            foodArr = msg.data;
            rendFoodlist(foodArr)
        })


        $(document).on('click', '.typeLabel', function() {
            $(this).siblings().removeClass('active');
            $(this).addClass('active');
            var id = $(this).attr('data-id');
            $.post('/Admin/FoodProduct/getCateProduct', {id: id}, function(msg) {
                foodArr = msg.data;
                rendFoodlist(foodArr)
            })
        })

        $(document).on('click', '.block-food .foodCrad', function() {
            var index = $(this).attr('data-index')
            var id = $(this).attr('data-id')
            $(this).siblings().removeClass('active');
            $(this).addClass('active')
            foodArr[index].count = 1;
            var flag = false;
            if (selectFood.length) {
                $('.selectFoodCrad').each(function(i, e) {
                    console.log($(e).attr('data-id') == id)
                    if ($(e).attr('data-id') == id) {
                        flag = true;
                        selectFood[i].count = parseInt($(e).find('.num').html()) + 1;
                    }
                })

                if (!flag) {
                    selectFood.unshift(foodArr[index])
                }
                rendSelectFoodDom(selectFood)
            } else {
                selectFood.unshift(foodArr[index])
                rendSelectFoodDom(selectFood)
            }
        })



        $(document).on('click', '.reduce', function() {
            if (parseInt($(this).siblings('.num').html()) == 1) {
                $(this).parents('.selectFoodCrad').remove()
            }
            $(this).siblings('.num').html(parseInt($(this).siblings('.num').html() - 1))
            selectFood = []
            $('.selectFoodCrad').each(function(i, e) {
                selectFood.push({
                    id: $(e).attr('data-id'),
                    price: $(e).attr('data-price'),
                    name: $(e).find('.foodname').html(),
                    count: $(e).find('.num').html()
                })
            })
            rendSelectFoodDom(selectFood)
        })
        $(document).on('click', '.plus', function() {
            $(this).siblings('.num').html((parseInt($(this).siblings('.num').html()) + 1))
            selectFood = []
            $('.selectFoodCrad').each(function(i, e) {
                selectFood.push({
                    id: $(e).attr('data-id'),
                    price: $(e).attr('data-price'),
                    name: $(e).find('.foodname').html(),
                    count: $(e).find('.num').html()
                })
            })
            rendSelectFoodDom(selectFood)
        })



        $(document).on('click', '#pay-panel .item', function() {
            $(this).siblings().removeClass('active');
            $(this).addClass('active');
            $('#code-num').focus()
        })

        $(document).on('click', '.closeLoading', function() {
            layer.closeAll();
            window.clearInterval(timeA)
        })

        var timeA = null;
        $('#submit').click(function() {
            $('#peyTypeTem .item').removeClass('active');
            $('#peyTypeTem .item').eq(0).addClass('active');
            $.post("/Admin/Orders/artificialOrder", {food: selectFood}, function(msg) {
                if (msg.code == 10000) {
                    $('#pay-btn').attr('data-order', msg.data.order_no)
                    var data = {};
                    data.order_no = msg.data.order_no;
                    var total = $('.money-num').text().trim();
                    $('.e-money').html(total);
                    layer.open({
                        type: 1,
                        area: ['640px', 'auto'],
                        title: '选择支付方式',
                        shadeClose: true,
                        id: 'pay-panel',
                        content: $('#peyTypeTem'),
                        success: function(layero, index){
                            $('#code-num').focus()
                        }
                    });

                    $('#code-num').bind('input propertychange', function() {
                        var type = $('#pay-panel .active').attr('data-type');
                        var length = 0;
                        var flag = false;
                        if (type == 1) {
                            length = 18;
                            flag = true;
                        }
                        if (type == 2) {
                            length = 16;
                            flag = true;
                        }
                        if (flag && $(this).val().length >= length) {
                            data.pay_type = type;
                            var that = $(this);
                            $('#code-num').unbind('input propertychange');
                            setTimeout(function() {
                                var bar_code = that.val();
                                $.post("/Admin/Orders/barCodePay", {order_no: msg.data.order_no, pay_type: type, bar_code: bar_code}, function(msg) {
                                    if (msg.code == 10000) {
                                        layer.alert('支付成功', {
                                            title: '支付提示',
                                            closeBtn: 0
                                        });
                                        selectFood = [];
                                        $('.selectfoodBody').html('')
                                        $('.food-num').html(0)
                                        $('.money-num').html(0)
                                    } else {
                                        layer.load(2, {
                                            shade: [0.5, 'gray'],
                                            content: msg.msg + '<br> <button class="layui-btn closebtnt"> ( <span class="c-num">30</span> ) 后可关闭 </button>',
                                            success: function(layero) {
                                                layero.find('.layui-layer-content').css({
                                                    'padding-top': '39px',
                                                    'background-position': 'top center',
                                                    'width': 'auto',
                                                    'text-align': 'center',
                                                    'transform': 'translate(-50%,0)'
                                                });
                                            }
                                        });
                                        var i = 30;
                                        var btntimer = setInterval(function() {
                                            $('.c-num').html(i)
                                            if (i <= 0) {
                                                console.log(1)
                                                window.clearInterval(btntimer)
                                                
                                                $('.closebtnt').html('关闭')
                                                $('.closebtnt').addClass('closeLoading')
                                            }
                                            i--;
                                        }, 1000)
                                        var timeA = setInterval(function() {
                                            $.post("/Admin/Orders/searchOrderPay", data, function(msg) {
                                                if (msg.code == 10000) {
                                                    layer.alert('支付成功', {
                                                        title: '支付提示',
                                                        closeBtn: 0
                                                    }, function() {
                                                        layer.closeAll()
                                                    });
                                                    selectFood = [];
                                                    $('.selectfoodBody').html('')
                                                    $('.food-num').html(0)
                                                    $('.money-num').html(0)
                                                    window.clearInterval(timeA)
                                                }
                                            })
                                        }, 5000)
                                    }
                                })
                            }, 2000)


                        }
                    });


                } else {
                    layer.alert(msg.msg,{title:'下单提示'})
                }
            })
            console.log(selectFood)
        })

        $(document).on('click', '#pay-btn', function() {
            var type = $('#pay-panel .active').attr('data-type');
            var orderNo = $('#pay-btn').attr('data-order');
            $.post("/Admin/Orders/barCodePay", {order_no: orderNo, pay_type: type}, function(msg) {
                console.log(msg);
                if (msg.code == 10000) {
                    layer.alert('支付成功', {
                        title: '支付提示',
                        closeBtn: 0
                    }, function() {
                        layer.closeAll()
                    });
                    selectFood = [];
                    $('.selectfoodBody').html('')
                    $('.food-num').html(0)
                    $('.money-num').html(0)
                }

            })
        })


//        $('#submit').click(function() {
//            $.post("/Admin/Orders/artificialOrder", {food: selectFood}, function(msg) {
//                if (msg.code == 10000) {
//                    layer.alert("完成", {title: "提示"})
//                    selectFood = [];
//                    $('.selectfoodBody').html('')
//                    $('.food-num').html(0)
//                    $('.money-num').html(0)
//                } else {
//                    layer.alert(msg.msg, {title: "提示"})
//                }
//            })
//        })
        $('#clears').click(function() {
            selectFood = [];
            $('.selectfoodBody').html('')
            $('.food-num').html(0)
            $('.money-num').html(0)
            console.log(selectFood)
        })

        function rendSelectFoodDom(obj) {
            $('.selectfoodBody').html('')
            var foodNum = 0;
            var total = 0
            $.each(obj, function(i, e) {
                var html = '<div class="selectFoodCrad" data-index="' + i + '" data-id="' + e.id + '" data-price="' + e.price + '"><div class="foodname">' + e.name + '</div><div class="operation"><div class="reduce btn">-</div><div class="num">' + e.count + '</div> <div class="plus btn">+</div></div></div>'
                $('.selectfoodBody').append(html)
                foodNum += 1;
                total += e.price * e.count
            })
            $('.food-num').html(foodNum)
            $('.money-num').html(total / 100)
        }
        // 渲染菜品列表
        function rendFoodlist(obj) {
            $('#foodlist').html('');
            $.each(obj, function(i, e) {
                var html = '<div class="foodCrad" data-index="' + i + '" data-id="' + e.id + '"><span>' + e.name + '</span><div class="money">' + e.price / 100 + '元</div></div>'
                $('#foodlist').append(html)
            })
        }
    </script>

</html>